<script setup>
import Codemirror from "codemirror-editor-vue3"
import "codemirror/mode/clike/clike"
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  currRow: Object,
})

const currRow = ref(props.currRow)
const row = currRow.value
const id = ref(row.id || '')
const classType = ref(row.classType || '')
const sourceCode = ref(row.sourceCode || '')
const version = ref(row.version)
const packagePath = ref(row.packagePath || '')
const currentTab = ref(classType.value == 0 ? 1 : 0)
const methodName = ref('')
const methodParam = ref('')
const el = ref('')
const methodParamHint = '参数格式：["1",2]'

// 代码编辑器
const cmRef = ref()

const cmOptions = {
  mode: "text/x-java",
}

const logRef = ref()

const logOptions = {
  mode: "log",
  readOnly: true,
  theme: "default",
}

const logRef2 = ref()

const logOptions2 = {
  mode: "log",
  readOnly: true,
  theme: "default",
}

const onChange = (val, cm) => {
  //console.log(val)
  //console.log(cm.getValue())
}

const onInput = val => {
  //console.log(val)
}

const onReady = cm => {
  //console.log(cm.focus())
}


const returnVal = ref('')
const logStr = ref('')

const execCommon = async () => {
  const param = methodParam.value

  const res = await $ivyApi.post(API_URLS.lfDynamicClassExecCommon, {
    sourceCode: sourceCode.value,
    packagePath: packagePath.value,
    methodName: methodName.value,
    params: param ? JSON.parse(param) : null,
  })

  returnVal.value = res.data.returnVal
  logStr.value = res.data.logStr
}

const execCmp = async () => {
  const res = await $ivyApi.post(API_URLS.lfDynamicClassExecCmp, {
    sourceCode: sourceCode.value,
    el: el.value,
    id: id.value,
  })

  returnVal.value = res.data.returnVal
  logStr.value = res.data.logStr
  el.value = res.data.el
}

const saveSourceCode = async () => {
  const res = await $ivyApi.post(API_URLS.lfDynamicClassUpdateSourceCode, {
    sourceCode: sourceCode.value,
    version: version.value,
    id: id.value,
  })

  showMsg(res)
}

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh()
  }, 1000)

  // setTimeout(() => {
  //   cmRef.value?.resize(100, 100)
  // }, 2000)

  // setTimeout(() => {
  //   cmRef.value?.cminstance.isClean()
  // }, 3000)
})

onUnmounted(() => {
  cmRef.value?.destroy()
  logRef.value?.destroy()
  logRef2.value?.destroy()
})

// 回调信息
const snackbar = reactive(API_URLS.resultMsg)

const showMsg = res => {
  $resultMsg.show(res, snackbar)
}
</script>

<template>
  <VRow>
    <VCol
      cols="12"
      sm="12"
    >
      <VSnackbar
        v-model="snackbar.msgVisible"
        location="top"
        :color="snackbar.msgColor"
      >
        {{ snackbar.msgContent }}
      </VSnackbar>
      <Codemirror
        ref="cmRef"
        v-model:value="sourceCode"
        :options="cmOptions"
        border
        height="200"
        width="100%"
        @change="onChange"
        @input="onInput"
        @ready="onReady"
      />
    </VCol>
    <VCol
      cols="12"
      sm="12"
    >
      <!--
        <VTabs
        v-model="currentTab"
        class="v-tabs-pill"
        >
        <VTab>组件测试</VTab>
        <VTab>普通类测试</VTab>
        </VTabs> 
      -->
      <VCard class="mt-5">
        <VCardText>
          <VWindow v-model="currentTab">
            <VWindowItem :key="0">
              <VRow>
                <VCol
                  cols="8"
                  sm="8"
                >
                  <VTextField
                    v-model="el"
                    class="mt-8"
                    label="EL表达式"
                    clearable
                  />
                </VCol>
                <VCol
                  cols="2"
                  sm="2"
                >
                  <VBtn
                    class="mt-8 w-100"
                    @click="execCmp"
                  >
                    执行组件
                  </VBtn>
                </VCol>
                
                <VCol
                  cols="2"
                  sm="2"
                >
                  <VBtn
                    color="error"
                    class="mt-8 w-100"
                    @click="saveSourceCode"
                  >
                    保存源码
                  </VBtn>
                </VCol>
                <VCol
                  cols="12"
                  sm="12"
                >
                  <h6 class="text-h5 mb-8">
                    执行结果：{{ returnVal }}
                  </h6>
                  <Codemirror
                    ref="logRef2"
                    v-model:value="logStr"
                    :options="logOptions2"
                    border
                    height="120"
                    width="100%"
                  />
                </VCol>
              </VRow>
            </VWindowItem>
            <VWindowItem :key="1">
              <VRow>
                <VCol cols="3">
                  <VTextField
                    v-model="methodName"
                    class="mt-8"
                    label="方法名称"
                    clearable
                  />
                </VCol>
                <VCol cols="7">
                  <VTextField
                    v-model="methodParam"
                    class="mt-8"
                    counter
                    clearable
                    maxlength="50"
                    color="success"
                    :hint="methodParamHint"
                    label="方法参数"
                  />
                </VCol>
                <VCol cols="2">
                  <VBtn
                    class="mt-8 w-100"
                    @click="execCommon"
                  >
                    执行
                  </VBtn>
                </VCol>
                
                <VCol
                  cols="12"
                  sm="12"
                >
                  <h6 class="text-h5 mb-8">
                    方法返回值：<VChip v-if="returnVal">
                      {{ returnVal }}
                    </VChip>
                  </h6>
                  <Codemirror
                    ref="logRef"
                    v-model:value="logStr"
                    :options="logOptions"
                    border
                    height="120"
                    width="100%"
                  />
                </VCol>
              </VRow>
            </VWindowItem>
          </VWindow>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>

<style scoped>
.mt-8 {
  margin-block-start: 8px !important;
}

.mr-8 {
  margin-inline-end: 8px !important;
}

.mb-8 {
  margin-block-end: 8px !important;
}

.w-100 {
  inline-size: 100% !important;
}
</style>
